:root {
  --color-primary: #2563eb;
  --color-bg: #ffffff;
  --color-text: #111827;
}

/* 兜底：防止任何元素撑爆视口 */
html,body {
  max-width: 100vw;
  max-height: 100vh;
  overflow-x: hidden;
}
img,svg {
  max-width: 100%;
  height: auto;
}
html.dark {
  --color-bg: #111827;
  --color-text: #f3f4f6;
}
html {
  font-size: 16px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  html {
    font-size: 18px;
  }
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  transition: background .3s, color .3s;
}
.skeleton {
  background: var(--color-bg);
  opacity: .2;
  border-radius: .5rem;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { opacity: .2; }
  50% { opacity: .4; }
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem 1rem; border-radius: .375rem; font-size: .875rem;
  font-weight: 500; border: none; cursor: pointer; transition: .2s;
}
.btn-primary {
  background: var(--color-primary); color: #fff;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-secondary {
  background: rgba(128,128,128,.15); color: var(--color-text);
}
.btn-secondary:hover { background: rgba(128,128,128,.25); }